function Carousel(el,obj){
    var self = this;
    typeof el==='string'?this.el = document.querySelector(el):console.error('第一个el参数必须是一个有效的Class类名或ID名的string类型,不能是无效的'+typeof el+'类型');
    this.handle = {
        datalist:obj.datalist, //图片数组
        length:obj.datalist.length, //图片数组数据长度
        // 获取操作DOM样式
        wrapper:obj.wrapper?self.el.querySelector(obj.wrapper):self.el.querySelector('.wrapper'), //用于存放图片数据信息的DOM元素
        page:obj.page?self.el.querySelector(obj.page):self.el.querySelector('.page'),//用于存放图片page分页数据信息的DOM元素
        prev:obj.prev?self.el.querySelector(obj.prev):self.el.querySelector('.button-prev'), //后退操作
        next:obj.prev?self.el.querySelector(obj.next):self.el.querySelector('.button-next'), //前进操作
        autoplay:obj.autoplay?true:false, //是否自动播放
        speed:obj.speed?obj.speed:1000, //自动播放速度，需要开始自动播放功能 autoplay = true;
        method:obj.method?obj.method:'click', //设定当前事件
        showViews:0, //默认page选项中的当前高亮效果
        mode:obj.mode = obj.mode || 'opacity', //图片轮播方向 x.y,opacity
        zIndex:1, //当mode设置为opacity的时候启用
        opacity:0,//当mode设置为opacity的时候启用
        closeTime:null //当autoplay设置为true的时候启用，用于自动播放停止
    };
    // 渲染数据到DOM
    this.handle.datalist.forEach(function(value,index){
        var oDiv = document.createElement('div'),
            oImg = document.createElement('img'),
            oPageNumber = document.createElement('span');
        oPageNumber.innerHTML = value.title;
        oPageNumber.setAttribute('data-number',index);
        oImg.setAttribute('src',value.bigImg);
        oDiv.setAttribute('data-img',index);
        oDiv.classList.add('slide');
        oDiv.appendChild(oImg);
        self.handle.page.appendChild(oPageNumber);
        self.handle.wrapper.appendChild(oDiv);
    });
    // 初始化DOM
    this.reset();

    function run(){
        clearInterval(self.handle.closeTime);
        if(self.handle.autoplay){
            self.handle.closeTime = setInterval(function(){
                self.runTime(0);
            },self.handle.speed);
        }
    }
    run()
    this.el.onmouseenter = function(){
        clearInterval(self.handle.closeTime)
    }
    this.el.onmouseleave = function(){
        run()
    } 
    this.handle.prev['on'+ this.handle.method]=function(){
         self.runTime(this);
    };
    this.handle.next['on'+ this.handle.method]=function(){
         self.runTime(this);
    };
    this.handle.page['on'+ this.handle.method]=function(e){
        var target = e.target; 
        self.handle.showViews = target.getAttribute('data-number')
        self.init()
   };
}
Carousel.prototype = {
    constructor:Carousel,
    runTime:function(oButton){
         var oButtonName = oButton?oButton.getAttribute('data-btn'):null;
         if(oButtonName === 'prev'){
            this.handle.showViews==0?this.handle.showViews = this.handle.length:NaN;
            this.handle.showViews--
         }else if(oButtonName === 'next' || oButtonName === null){
            this.handle.showViews==this.handle.length-1?this.handle.showViews=-1:NaN;
            this.handle.showViews++
         }
         this.init()
    },
    init:function(){
        var childrenStyle;
        if(this.handle.mode==='x'){
            childrenStyle = this.getStyle(this.handle.wrapper.children[0],'width');
            this.handle.wrapper.style.left = -(childrenStyle * this.handle.showViews) + 'px';
        }else if(this.handle.mode==='y'){
            childrenStyle = this.getStyle(this.handle.wrapper.children[0],'height');
            this.handle.wrapper.style.top = -(childrenStyle * this.handle.showViews) + 'px';
        }else if(this.handle.mode==='opacity'){
            this.handle.zIndex++
            this.handle.wrapper.children[this.handle.showViews].style['z-index'] = this.handle.zIndex;
            for (var index = 0; index < this.handle.length; index++) {
                var element =  this.handle.wrapper.children[index];
                element.style['opacity'] = 0;
            }
            this.handle.wrapper.children[this.handle.showViews].style['opacity'] = 1;
        }

        for (var index = 0; index < this.size(); index++) {
            var element = this.handle.page.children[index];
            element.classList.remove('active')
        }
        this.handle.page.children[this.handle.showViews].classList.add('active')
    },
    // 根据播放方式，设定主容器 wrapper 的宽高
    reset:function(){
        this.handle.page.children[this.handle.showViews].classList.add('active')
        switch(this.handle.mode){
            case "x":
                this.handle.wrapper.style.cssText = 'width:'+this.getStyle(this.handle.wrapper,'width') * this.handle.length + 'px;position:relative;left:0'
                break;
            case "y":
                this.handle.wrapper.style.cssText = 'height:'+this.getStyle(this.handle.wrapper,'height') * this.handle.length + 'px;position:relative;top:0';
                break;
            case "opacity":
                this.handle.wrapper.style.cssText = 'width:'+this.getStyle(this.handle.wrapper,'width') +'px;position:relative;top:0'; 
                // 设置事件操作按扭的ZINDEX9999
                this.handle.page.style['z-index'] = this.handle.prev.style['z-index'] = this.handle.next.style['z-index'] = '9999';
                for (var index = 0; index < this.size(); index++) {
                    var element =  this.handle.wrapper.children[index];
                    var zindex = element.getAttribute('data-img')==0?1:0
                    element.style.cssText = 'position:absolute;z-index:'+zindex+';opacity:'+zindex;
                }
        }
        return this.handle.mode;
    },
    size:function(){
        return this.handle.length;
    },
    getStyle:function(obj,name){
        var styleAttr;
        if(obj.currentStyle){
           styleAttr = obj.currentStyle[name];
        }else{
           styleAttr = getComputedStyle(obj,null)[name];
        }
        return parseInt(styleAttr);
    }
};